<template>
    <div class="all">
        <el-page-header @back="goBack" :content="$route.name"></el-page-header>
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="shopSearch" :inline="true" size="mini">
                <el-form-item label="姓名：">
                    <el-input v-model="shopSearch.name" clearable placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="shopSearch.address" clearable placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="shopTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店名称" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车次数" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_money }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店地址" min-width="240px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店环境" width="160px">
                    <template slot-scope="scope">
                        <!-- <span>{{ scope.row.image_url }}</span> -->
                        <div @click="browse(scope.$index, scope.row)">
                            <img :src="scope.row.image_url" style="width:50px;" alt="活动图片" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="店铺状态" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.state | filstate}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <!-- <el-button
                            size="small"
                            type="warning"
                            @click="detail(scope.$index, scope.row)"
                        >详情</el-button> -->
                        <el-button
                            size="small"
                            type="danger"
                            @click="delshop(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 添加对话框 -->
            <el-dialog title="添加" width="600px" :visible.sync="addVisible" center @close="closeAdd">
                <span class="ff53 f14 tc">*获取经纬度时，前值为纬度，后值为经度</span>
                <el-form :model="addshop" :rules="addRules" label-position="left" ref="addshop">
                    <el-form-item label="门店名称：" prop="name" :label-width="formLabelWidth">
                        <el-input clearable v-model="addshop.name" placeholder="请输入门店名称"></el-input>
                    </el-form-item>
                    <el-form-item label="所在城市：" prop="city" :label-width="formLabelWidth">
                        <el-select v-model="addshop.city">
                            <el-option v-for="item in cityname" :key="item.id" :label="item.city+'('+item.first+')'" :value="item.city"></el-option>
                        </el-select>
                        <!-- <el-cascader class="search-cascader" :options="cityOptions" v-model="provinces" @change="changeProvince(1)"></el-cascader> -->
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="address" :label-width="formLabelWidth">
                        <el-input clearable v-model="addshop.address" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="经纬度：" :label-width="formLabelWidth">
                        <el-col :span="8">
                            <el-input clearable v-model="addshop.longitude" placeholder="经"></el-input>
                        </el-col>
                        <el-col :span="2">-</el-col>
                        <el-col :span="8">
                            <el-input clearable v-model="addshop.latitude" placeholder=纬></el-input>
                        </el-col>
                        <el-button size="mini" onclick="window.open ('https://lbs.qq.com/tool/getpoint/index.html', 'newwindow', 'height=980, width=1100, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')">获取经纬度</el-button>
                    </el-form-item>
                    <el-form-item label="门店环境："  :label-width="formLabelWidth">
                        <!-- <el-input clearable v-model="addshop.image_url" placeholder="请上传门店的图片"></el-input> -->
                        <el-upload
                            action="/index.php/fileUpload/upload"
                            name="image"
                            ref="upload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-success="handleSuccess">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="店铺状态" prop="state" :label-width="formLabelWidth">
                        <el-select v-model="addshop.state">
                            <el-option label="休息" value="0"></el-option>
                            <el-option label="正常营业" value="1"></el-option>
                            <el-option label="关闭" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editshop" :rules="addRules" ref="editshop">
                    <el-form-item label="门店名称：" prop="name" :label-width="formLabelWidth">
                        <el-input clearable v-model="editshop.name" placeholder="请输入新的门店名称"></el-input>
                    </el-form-item>
                    <el-form-item label="门店状态：" prop="state" :label-width="formLabelWidth">
                        <!-- <el-input clearable v-model="editshop.state" placeholder="请输入商户号"></el-input> -->
                        <el-select v-model="editshop.state">
                            <el-option v-for="item in shopstate" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            <!-- <el-option label="正常营业" :value="1"></el-option>
                            <el-option label="关闭" :value="2"></el-option> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="address" :label-width="formLabelWidth">
                        <el-input clearable v-model="editshop.address" placeholder="请输入新的详细地址"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 详情对话框 -->
            <!-- <el-dialog
                title="详情"
                width="60%"
                :visible.sync="detailVisible"
                center
                @close="closeDetail"
            >
                <el-form :model="detailshop">
                    <el-form-item
                        label="姓名："
                        prop="name"
                        :label-width="formLabelWidth"
                    >{{detailshop.name}}</el-form-item>
                    <el-form-item
                        label="商户号："
                        prop="city"
                        :label-width="formLabelWidth"
                    >{{detailshop.city}}</el-form-item>
                    <el-form-item
                        label="手机号："
                        prop="address"
                        :label-width="formLabelWidth"
                    >{{detailshop.address}}</el-form-item>
                </el-form>
                <el-table
                    :data="detailData"
                    border
                    :cell-style="cellStyle"
                    :header-cell-style="rowClass"
                >
                    <el-table-column show-overflow-tooltip label="设备号">
                        <template slot-scope="scope">
                            <span>{{ scope.row.equipmentNumber }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="店名">
                        <template slot-scope="scope">
                            <span>{{ scope.row.storeName }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog> -->
            <!-- 图片放大 -->
            <el-dialog center :visible.sync="dialogVisible">
                <div style="text-align:center;">
                    <img width="250px" height="auto" :src="dialogImageUrl" alt />
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate } from '../../util/time.js';
// import cityOptions from '../../util/city/city_data2017_element';
export default {
    data() {
        return {
            // 分页
            headers: "",  //上传，现在没token，有了需要提前在函数中赋值
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            addVisible: false, //添加对话框
            editVisible: false, //修改对话框
            detailVisible: false, //详情对话框
            dialogVisible: false, //放大图片的对话框显示
            dialogImageUrl: "", //放大图片的路径
            formLabelWidth: "100px", //表单label宽度
            addshop: {
                //添加对话框表单
                name: "", //姓名
                wash_num: '',//次数
                wash_money: '',//金额
                business_id: '',//所属加盟商
                city: '',//城市
                address: '',//详细地址
                longitude: '',//经度
                latitude:'',//纬度
                image_url: '',//店图
                state:''
            },
            editshop: {
                //修改对话框表单
                name: "", //店名
                state: "",//店铺状态
                address: "" //详细地址
            },
            shopstate:[
                {id:0,name:"休息"},
                {id:1,name:"正常营业"},
                {id:2,name:"关闭"},
            ],
            detailshop: {
                //详情对话框表单
                name: "", //姓名
                // city: "", //商户号
                address: "" //手机号
            },
            shopSearch: {
                //搜索
                name: "", //姓名
                address: "" //手机号
            },
            detailData: [
                {
                    equipmentNumber: "123", //设备号
                    storeName: "深圳分店" //店名
                }
            ],
            shopTable: [
                // // 表单数据
                {
                    city: "123456", //商户号
                    name: "人员1", //姓名
                    address: "15247862354", //手机号
                    joinDate: "2020-07-30", //加入日期
                    equipmentCount:2, //设备数
                },
                {
                    city: "145235", //商户号
                    name: "人员2", //姓名
                    address: "15247862354", //手机号
                    joinDate: "2020-08-08", //加入日期
                    equipmentCount:2, //设备数
                },
                {
                    city: "174852", //商户号
                    name: "人员3", //姓名
                    address: "15247862354", //手机号
                    joinDate: "2020-08-15", //加入日期
                    equipmentCount:2, //设备数
                }
            ],
            addRules: {
                // 表单验证
                name: [
                    {
                        required: true,
                        message: "请输入门店名称",
                        trigger: "blur"
                    }
                ],
                city: [
                    {
                        required: true,
                        message: "请选择门店所在地",
                        trigger: "blur"
                    }
                ],
                address: [
                    {
                        required: true,
                        message: "请输入详细地址",
                        trigger: "blur"
                    }
                ],
                state: [
                    {
                        required: true,
                        message: "请选择门店状态",
                        trigger: "blur"
                    }
                ],//设备数
                image_url: [
                    {
                        required: true,
                        message: "请上传图片",
                        trigger: "blur"
                    }
                ],//登录密码
                level:[
                    {
                        required: true,
                        message: "请选择加盟商等级",
                        trigger: "change"
                    } 
                ],
                top_id:[
                    { required: true,
                        message: "请选择所属加盟商",
                        trigger: "change"  
                    }
                ]
            },
            // cityOptions: cityOptions,           //全国的省市区的级联选择器的数据引入绑定
            // provinces: ''//城市的选择器结果
            cityname: [],
            dialogImageUrl: '',//上传图片的预览的图片地址
            dialogVisible: false,//上传图片弹出层状态
            uploadimg: ""
        };
    },
    filters:{
        //店铺状态
        filstate(state){
            if(state === 0){
                state = "休息"
            }else if(state === 1){
                state = "正常营业"
            }else if(state === 2){
                state = "关闭"
            }else{return false}
            return state
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        goBack(){
            this.$router.go(-1)
        },
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount,business_id:this.row.id}
            for(var i in this.shopSearch) this.shopSearch[i] !== '' ? data[i] = this.shopSearch[i] : '';
            // console.log(data,this.userSearch)
            console.log(data)
            utils.request("/shop/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.shopTable = resp.data.data.data
                if(num === 2){    
                    this.$message({
                        message: "为您找到"+resp.data.data.total+'位商户',
                        type: "success"
                    })
                }
            })
        },
        add() {
            // 添加
            this.addVisible = true;
        },
        confirmAdd() {
            // 确认添加
            this.$refs["addshop"].validate(valid => {
                if (valid) {
                    let that = this;
                    let data  = {};
                    for(var i in this.addshop) that.addshop[i] !== "" ? data[i] = that.addshop[i] : data[i] = "0";
                    data.business_id = String(this.row.id)
                    data.state = Number(data.state);
                    data.image_url = this.uploadimg;
                    console.log(data)
                    utils.request("/shop/add","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        data.id = resp.data.data;
                        that.shopTable.push(data)
                        this.addVisible = false;
                        this.$refs.upload.clearFiles();
                        this.uploadimg = "";
                        for(var o in this.addshop) this.addshop[o] = "";
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        cancelAdd() {
            // 取消添加
            this.addVisible = false;
            this.$refs["addshop"].resetFields();
            this.$refs.upload.clearFiles()
            this.uploadimg = "";
            for(var o in this.addshop) this.addshop[o] = "";
        },
        closeAdd() {
            // 关闭添加对话框
            this.addVisible = false;
            for(var o in this.addshop) this.addshop[o] = "";
            this.$refs["addshop"].resetFields();
            this.$refs.upload.clearFiles();
            this.uploadimg = "";
        },
        shopSexFilterHandler(value, row, column) {
            // 性别筛选过滤事件
            const property = column["property"];
            return row[property] === value;
        },
        shopStatusFilterHandler(value, row, column) {
            // 状态筛选过滤事件
            const property = column["property"];
            return row[property] === value;
        },
        edit(index, row) {
            // 修改
            this.editVisible = true;
            // for(var o in this.editshop) this.editshop[o] = row[o];
            console.log(row)
            this.editshop.name = row.name;
            this.editshop.state = String(row.state);
            this.editshop.address = row.address;
            this.editshop.id = row.id;
            this.editshop.index = index;
            console.log(this.editshop)
        },
        confirmEdit() {
            // 确认修改
            this.$refs["editshop"].validate(valid => {
                if (valid) {
                    let that = this;
                    let data = {};
                    for(var i in this.editshop) i!=="index" ? data[i] = this.editshop[i] : '';
                    console.log(data)
                    utils.request("/shop/update","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        this.editVisible = false;
                        let key = that.editshop.index;
                        for(var o in data) 
                        that.shopTable[key][o] = data[o], 
                        that.editshop[o] = '',
                        that.editshop.index = '';
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        cancelEdit() {
            // 取消修改
            this.editVisible = false;
            for(var i in this.editshop) this.editshop[i] = '';
            this.$refs["editshop"].resetFields();
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            for(var i in this.editshop) this.editshop[i] = '';
            this.$refs["editshop"].resetFields();
        },
        detail(index, row) {
            // 详情
            this.detailshop.name = row.name;
            this.detailshop.city = row.city;
            this.detailshop.address = row.address;
            this.detailVisible = true;
        },
        closeDetail() {
            // 关闭详情对话框
            this.detailVisible = false;
        },
        delshop(index, row) {
            // 删除
            // this.$router.push({ path: "/equipmentDetail", query: { row: row } });
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/shop/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    console.log(resp)
                    this.shopTable.splice(index,1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        },


        // 上传图片的成功的回执函数
        handleSuccess(resp,file,fileList){
            console.log(resp,file,fileList)
            this.uploadimg = "https://dzylab.dpyun.site/storage/"+resp.data;
        },
        // 图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // changeProvince(num){
        //     // 级联选择器的省市区
        //     if(num===1){
        //         // console.log(this.provinces)
        //         this.addshop.address = "";
        //         this.provinces.forEach(ment => {
        //             if(ment.charAt(ment.length-1) === '市' || ment.substring(ment.length-3) === '行政区' || ment === '台湾省'){
        //                 this.addshop.city = ment
        //             }
        //             this.addshop.address += ment;
        //         });
        //     }
        // },
        browse(index, row) {
            //查看图片
            // console.log(index, row);
            this.dialogImageUrl = row.image_url;
            this.dialogVisible = true;
        },
    },
    created() {
        this.row = JSON.parse(this.$route.query.row);
        if (this.row !== "[object Object]") {
            // console.log(this.row);
        }
        this.searchClick(1)
        utils.request("/city/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            // console.log(resp)
            this.cityname = resp.data.data.data.map((item)=>{
                return{
                    id: item["id"],
                    city: item["city"],
                    first: item["first"]
                }
            })
        })
    }
};
</script>
